<!-- Created by edgardeng on 2018/4/11. -->
<template>
  <div class="hs-page-one">
    <div class="hs-panel hs-bg-card">
      <el-row>
        <div class="hs-panel-title">
          <h3> 用户信息
            <span style="float: right">
          <el-button type="text" size="small" @click="handlePassword">修改密码 </el-button>
              <!--<el-button type="primary" size="mini">信息修改 </el-button>-->
          </span>
          </h3>
        </div>

        <el-col :span="8" >
          <div class="profile_img">
            <!-- Current avatar -->
            <img class="img-responsive avatar-view" :src="'static/img/avatar/' + user.avatar" >
          </div>
        </el-col>
        <el-col :span="16">
          <h3>
            {{profile.name}}

           </h3>
          <ul class="list-user-data">
            <li>
              <i class="fa fa-user user-profile-icon"> </i>
              {{profile.username}}
            </li>
            <li>
              <i v-if="profile.gender ==1" class="fa fa-male"> </i>
              <i v-else class="fa fa-female"> </i>
              {{profile.gender == 1 ? '男':'女'}}
            </li>

            <li>
              <i class="fa fa-envelope-square user-profile-icon"> </i>
              {{profile.email}}
            </li>
            <li>
              <i class="fa fa-phone user-profile-icon"> </i>
              {{profile.phone}}
            </li>
            <li >
              <i class="fa fa-clock-o user-profile-icon"> </i>
              {{profile.createdAt}}
            </li>
          </ul>
        </el-col>
      </el-row>

    </div>
    <el-dialog title="修改用户的密码"
               :visible.sync="editPasswordDialog.show">
      <el-form label-width="100px" :rules="passwordRules" :model="editPasswordDialog" ref="password">
        <el-form-item label="旧密码" required>
          <el-input v-model="editPasswordDialog.oldPassword" type="password"> </el-input>
        </el-form-item>

        <el-form-item label="新密码" required>
          <el-input v-model="editPasswordDialog.newPassword" type="password"> </el-input>
        </el-form-item>

        <el-form-item >
          <el-button @click.native="editPasswordDialog.show = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmitPassword">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6" >
import { putUserPassword } from '../../../api/admin/user'
import { httpHost } from '../../../api/index'
import { mapGetters } from 'vuex'
import { hexMd5 } from '../../../utils/security/md5'

export default {
  name: 'Profile',
  data () {
    return {
      profile: {
        avatar: 'default.jpg',
        name: '',
        phone: '',
        email: '',
        address: '',
        createdAt: ''
      },
      host: undefined,
      passwordRules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ]
      },
      editPasswordDialog: {
        show: false,
        oldPassword: undefined,
        newPassword: undefined
      }
    }
  },
  computed: {
    ...mapGetters({
      user: 'getUser'
    })
  },
  mounted () {
    this.getProfile()
    this.host = httpHost()
  },
  methods: {
    getProfile () {
      this.profile = this.user
      // getObj(this.user.id).then(response => {
      //   this.profile = response.data
      // })
    },
    handlePassword () {
      this.editPasswordDialog.show = true
    },
    handleSubmitPassword () {
      this.$refs['password'].validate(valid => {
        if (valid) {
          let o = hexMd5(this.editPasswordDialog.oldPassword)
          let n = hexMd5(this.editPasswordDialog.newPassword)
          putUserPassword(this.profile.username, o, n).then(response => {
            let code = parseInt(response.code)
            if (code === 0) {
              this.editPasswordDialog.show = false
              this.$message.success('密码修改成功')
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped  rel="stylesheet/scss" lang="scss" >

  .profile_img {
    display: block;
    max-width: 180px;
    max-height: 180px;
    margin: 10px;
  }

  .profile_img img{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: inherit;
  }

  .list-user-data {
    margin-left: -40px;
  }

  .list-user-data li {
    margin: 10px 0;
    list-style-type:none;
  }

  .list-user-data i {
    margin-right: 10px;
  }

</style>
